<template>
  <div class="right">
    <div class="right-top-box">
      <el-popover placement="left-start" popper-class="right-box-img-popover" :width="150" trigger="click">
        <template #reference>
          <img class="right-box-img" :src="getAssetsFile('tyfp', 'rightser')" />
        </template>
        <div class="right-box-popover-item" v-for="item in 6" :key="item">
          <div>{{ item }}</div>
        </div>
      </el-popover>

      <div class="right-box-bottom">
        <div v-for="item in 4" :key="item" class="right-box-bottom-item">
          <div class="right-box-bottom-item-box">
            00:09 XX响应
          </div>
        </div>
      </div>
    </div>
    <div class="right-bottom-box">
      <div class="right-bottom-box-echart">
        <div class="right-bottom-box-echart-text">自动评判</div>
        <div class="right-bottom-box-echart-box" ref="radarref" />
      </div>
      <div class="right-bottom-box-btn">
        事件终止
      </div>
    </div>
  </div>


</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { getAssetsFile } from '@/utils/compnt'
import * as echarts from 'echarts'



//-----------------
const radarref = ref()

let radarrefinit = null

// 更新图表配置
const updateRadar = async () => {
  if (!radarref.value) return;
  const option = {
    color: ['#21CCFF'],
    radar: {
      center: [`55%`, '45%'],
      radius: '70%',
      splitArea: {
        areaStyle: {
          color: ['#ffffff00'],
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(211, 253, 250, 0.8)'
        }
      },
      indicator: [
        { name: '响应时间', max: 6500 },
        { name: '通讯效率', max: 16000 },
        { name: '伤员控制', max: 30000 },
        { name: '资源调配', max: 38000 },
        { name: '污染控制', max: 52000 },
        { name: '指挥执行', max: 25000 }
      ],
      axisName: {
        color: '#A9B2BF'
      },
    },
    series: [
      {
        name: 'Budget vs spending',
        type: 'radar',
        data: [
          {
            value: [4200, 3000, 20000, 35000, 50000, 18000],
            symbolSize: 0,
            areaStyle: {
              color: 'rgba(33, 204, 255, 0.40)'
            }
          },

        ]
      }
    ],

  };
  radarrefinit.setOption(option)
}

// 初始化图表
const initRadarref = async () => {
  if (!radarref.value) return;

  // 销毁之前的实例（如果有）
  if (radarrefinit) {
    radarrefinit.dispose();
  }
  radarref.value.clientWidth;
  // 初始化 ECharts 实例，设置为容器大小
  radarrefinit = echarts.init(radarref.value);
  updateRadar();
}

// 处理窗口大小变化
const handleResize = () => {
  if (radarrefinit) {
    radarrefinit.resize();
  }

}

// 组件挂载时初始化图表
onMounted(() => {
  initRadarref();


  window.addEventListener('resize', handleResize);
})

// 组件卸载时清理事件监听器和图表实例
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  if (radarrefinit) {
    radarrefinit.dispose();
    radarrefinit = null;
  }
})

</script>

<style lang="less" scoped>
.right {
  overflow-y: auto;
  position: absolute;
  right: 36px;
  top: 116px;
  width: 430px;
  height: calc(100vh - 138px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .right-top-box {
    display: flex;
    justify-content: flex-end;

    .right-box-img {
      width: 24px;
      height: 24px;
      cursor: pointer;
      margin-top: 8px;
    }

    .right-box-bottom {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 12px;

      .right-box-bottom-item {
        width: 126px;
        height: 40px;
        margin: 9px 0;
        background: url('../../../../../assets/img/tyfp/rigghtop.png');
        cursor: pointer;

        .right-box-bottom-item-box {
          line-height: 40px;
          color: #01C2FF;
          text-align: center;
        }
      }

      .right-box-bottom-item:first-child {
        margin-top: 0;
      }
    }

  }

  .right-bottom-box {
    height: 500px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .right-bottom-box-echart {
      width: 393px;
      height: 382px;
      background: rgba(8, 26, 48, 0.54);

      border-radius: 4px;

      .right-bottom-box-echart-text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #FFFFFF;
        line-height: 16px;
        margin-top: 20px;
        margin-left: 20px;
        margin-bottom: 20px;

      }

      .right-bottom-box-echart-box {
        width: 350px;
        height: 320px;
      }

    }

    .right-bottom-box-btn {
      width: 120px;
      height: 38px;
      line-height: 38px;
      text-align: center;
      color: #fff;
      background: #FE0404;
      border-radius: 4px;
      cursor: pointer;
    }
  }
}

.right-box-img-popover {

  .right-box-popover-item {
    height: 20px;
    font-family: PingFangSC, PingFang SC;
    font-size: 14px;
    color: #A8D6FF;
    line-height: 20px;
    margin: 5px 0;
    cursor: pointer;


  }

  .right-box-popover-item:first-child {
    margin-top: 0;
  }
}
</style>

<style>
.right-box-img-popover {
  background: RGBA(15, 32, 48, 0.6) !important;



}

.right-box-img-popover.el-popper.is-light,
.el-popper.is-light>.el-popper__arrow:before {
  border: none;
  border-right: 2px solid RGBA(100, 178, 255, 1) !important;
  background: linear-gradient(225deg, #64b2ff 50%, #0b1a2c 50%);
}
</style>